import React from 'react';

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { createDrawerNavigator } from 'react-navigation-drawer';
import RegisterScreen from '../screens/RegisterScreen';
import LoginScreen from '../screens/LoginScreen';
import WelcomeScreen from '../screens/WelcomeScreen';
import ManagerHomeScreen from '../screens/ManagerHomeScreen';
import WorkerHomeScreen from '../screens/WorkerHomeScreen';
import ProcessDetailScreen from '../screens/industry/ProcessDetailScreen';
import ProcessMonitorScreen from '../screens/industry/ProcessMonitorScreen';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import DrawerScreen from '../screens/DrawerScreen';
import StepTaskScreen from '../screens/industry/StepTaskScreen';

import { theme } from '../constants';
import { colors } from '../constants/theme';

// 认证的路由
const AuthStack = createStackNavigator(
  {
    Welcome: {
      screen: WelcomeScreen,
      navigationOptions: {
        header: null, // disable navigation bar
      }
    },
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        headerStyle: {
          height: theme.sizes.base * 4,
          backgroundColor: theme.colors.white,
          borderBottomColor: 'transparent',
          elevation: 0,
        },
        headerBackImage: <Ionicons name="ios-arrow-back" size={26} color={theme.colors.gray} />,
        headerBackTitle: null,
        headerLeftContainerStyle: {
          alignItems: 'center',
          marginLeft: theme.sizes.base * 2,
          paddingRight: theme.sizes.base,
        },
        headerRightContainerStyle: {
          alignItems: 'center',
          paddingRight: theme.sizes.base,
        }
      }
    },
    Register: {
      screen: RegisterScreen
    },
  },
  {
    defaultNavigationOptions: {
      headerBackTitle: null,
    },
  },
);


const MainDefaultOptions = {
  gestureResponseDistance: {
    // horizontal: 300
  },
  headerBackTitle: null,
  headerStyle: {
    backgroundColor: colors.secondary, borderBottomWidth: 0
  },
  headerTitleStyle: {
    color: 'white',
    fontSize: 18,
    alignSelf: 'center',
  },
};

const WithBackOptions = {
  headerBackImage: <Ionicons name="ios-arrow-back" size={30} color="white" />,
  headerBackAllowFontScaling: true,
  headerLeftContainerStyle: {
    marginLeft: theme.sizes.base,
  },
};

const ManagerStack = createStackNavigator(
  {
    ManagerHome: {
      screen: ManagerHomeScreen,
    },
    ProcessDetail: {
      screen: ProcessDetailScreen,
      navigationOptions: {
        ...WithBackOptions
      }
    },
    ProcessMonitor: {
      screen: ProcessMonitorScreen,
      navigationOptions: {
        ...WithBackOptions
      }
    }
  },
  {
    defaultNavigationOptions: {
      ...MainDefaultOptions
    },
  }
);


const WorkerStack = createStackNavigator(
  {
    WorkerHome: {
      screen: WorkerHomeScreen
    },
    StepTask: {
      screen: StepTaskScreen,
      navigationOptions: {
        ...WithBackOptions
      }
    }
  },
  {
    defaultNavigationOptions: {
      ...MainDefaultOptions
    }
  },
);

const ManagerDrawer = createDrawerNavigator(
  {
    ManagerStack
  },
  {
    contentComponent: (props) => (
      <DrawerScreen {...props} />
    )
  }
);

const WorkerDrawer = createDrawerNavigator(
  {
    WorkerStack,
  },
  {
    contentComponent: (props) => (
      <DrawerScreen {...props} />
    )
  }
);

export default createAppContainer(
  createSwitchNavigator({
    Auth: AuthStack,
    Manager: ManagerDrawer,
    Worker: WorkerDrawer,
    AuthLoading: AuthLoadingScreen
  },
  {
    initialRouteName: 'AuthLoading'
  })
);
